<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		body{
				height: 1500px;
		    }
			.centerMe{
				text-transform:uppercase;
				height:200px;
				display:flex;
				align-items:center;
				justify-content:center;
				border: 1px solid #FF0000;
			}
			.menuWrap{
				background: indigo;
				font-family: "微软雅黑";
				font-size: 1rem;
				min-height: 2.75rem;
				display: flex;
				align-items: center;
				flex-direction: column;
				padding: 0 1rem;
			}
			.menuWrap>a{
				cursor: pointer;
			}
			@media only screen and (min-width:31.25rem ) {
				.menuWrap{
					flex-direction: row;
				}
			}
			
			.listItem,.lastItem{
				color: #EBEBEB;
				text-decoration: none;
			}
			@media only screen and (min-width:31.25rem ) {
				.listItem{
					margin-right: 1rem;
				}
				.lastItem{
					margin-left: auto;
				}
			}
		</style>
	</head>
	<body>
		
		<div class="menuWrap">
			<a class="listItem">主页</a>
			<a class="listItem">关于</a>
			<a class="listItem">产品</a>
			<a class="listItem">政策</a>
			<a class="lastItem">联系我们</a>
		</div>
		
		
		<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				alert($(".menuWrap>a").eq(0).text());
			})
		</script>
		
	</body>
</html>
